<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2021/12/17
  Time: 8:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色管理</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <style>
        /*解决普通复选框无上边框问题*/
        .laytable-cell-1-0 .layui-icon {
            margin-top: 5px !important;
        }
        /*解决横条复选框无上边框问题*/
        .layui-table-view .layui-form-checkbox{
            margin-top:0px !important;
        }
    </style>
</head>
<body>
<div style="margin:20px 10px;">
<table  class="layui-hide" id="test" lay-filter="test"></table>
    <%--树形结构--%>
    <div id="permission" style="display: none">
        <div style="height: 550px"  id="test12" class="demo-tree-more"></div>
        <a class="layui-btn" id="comfirmPermission">确定修改</a>
    </div>
<script type="text/html" id="barDemo">
    {{# if(d.status==0){  }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editPermission">修改权限</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{# } }}
</script>

</div>
</body>
<script>
    layui.use(['tree', 'util','table','jquery'], function() {
        var table = layui.table;
        var tree = layui.tree;
        var layer = layui.layer;
        var util = layui.util;
        var $=layui.jquery;
        table.render({
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/role/findAll'
            ,title: '角色数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID',  fixed: 'left', unresize: true, sort: true}
                ,{field:'rolename', title:'角色名'}
                ,{field:'remark', title:'角色描述', edit: 'text'}
                ,{field:'status', title:'状态', width:120,templet:function(data){
                      if(data.status==0){
                           return '<a class="layui-btn layui-btn-xs">可以</a>';
                      }else{
                           return '<a class="layui-btn layui-btn-danger layui-btn-xs">禁用</a>';
                      }
                }}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:250}
            ]]
            ,page: true
        });

        //确定修改权限
        var rid; //全局变量 表示被修改的角色id 当被点击修改权限按钮时为该rid赋值
        $("#comfirmPermission").click(function(){
            var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据
            var menuIds="";
            for(var i=0;i<checkedData.length;i++){
                   var checkedDatum = checkedData[i];
                   menuIds+="menuId="+checkedDatum.id+"&";
                   var children=checkedDatum.children;
                   for(var j=0;j<children.length;j++){
                        menuIds+="menuId="+children[j].id+"&"
                   }
            }
            menuIds=menuIds.substring(0,menuIds.lastIndexOf("&"))

            $.ajax({
                  url:"${pageContext.request.contextPath}/menu/confirmPermission?"+menuIds,
                  data:{"rid":rid},
                  dataType:"json",
                  success: function(result){
                      if(result.code===2000) {
                          layer.closeAll();
                          layer.msg(result.msg, {icon: 1})
                      }
                  }
            });


        });


        //基本演示  tree.render is not a function layui版本太低
        function getPermissionTree(){
          $.ajax({
                url:"${pageContext.request.contextPath}/menu/treeMenu",
                dataType:"json",
                type:"post",
                success: function(result){
                     if(result.code===2000){
                         tree.render({
                             elem: '#test12'
                             ,data: result.data
                             ,showCheckbox: true  //是否显示复选框
                             ,id: 'demoId1'  //区分不同的树
                             ,isJump: true //是否允许点击节点时弹出新窗口跳转
                         });
                     }
                }
          });
        }
        //选中默认有的权限
        function setMyChecked(id){
             $.ajax({
                   url:"${pageContext.request.contextPath}/menu/findRoleMenuId",
                   data:{"rid":id},
                   dataType:"json",
                   success: function(result){
                        tree.setChecked('demoId1', result.data); //勾选指定节点
                   }

             })
        }



        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'editPermission'){
                   getPermissionTree();
                   rid=data.id;
                   layer.open({
                        type:1,
                        title: "修改权限",
                        area:["300px","600px"],
                        content: $("#permission")
                   })
                   setMyChecked(data.id);
            }
        });
    });
</script>
</html>
